<template>
	<view id="home">
		<SearchBar :flag="0">
			<NavBar :titles="titles" :height="54.54" @tabClick="tabClick"></NavBar>
		</SearchBar>
		<NotifyBar :notices="notices" @mapListClick="mapListClick"></NotifyBar>
		<Add :size="size[addBtn]"></Add>
		<Map @ChildClick="childClick" @ReportLocation="setLocation" v-if="hackReset&&displayIndex" :latitude="latitude" :longitude="longitude"
			:location="tieArr[currentType].list"></Map>
		<!-- 不要用v-else，否则会导致map被销毁时页面抖动 -->
		<Scroll :total="listNum" :currentPage="tieArr[currentType].page" v-if="!displayIndex" @pullUpLoad="loadMore" @updateData="updateData">
			<InformationBar :arr="item" :opIndex="opIndex" v-for="(item,index) in tieArr[currentType].list" :key="index"></InformationBar>
		</Scroll>
	</view>
</template>

<script>
	import SearchBar from '../../components/common/SearchBar.vue'
	import NavBar from '../../components/common/NavBar.vue'
	import NotifyBar from './HomeItem/NotifyBar.vue'
	import Scroll from '../../components/common/Scroll.vue'
	import Map from '../../components/common/Map.vue'
	import InformationBar from "../../components/common/InformationBar.vue"
	import Add from '../../components/common/Add.vue'
	export default {
		name: 'Home',
		components: {
			SearchBar,
			NavBar,
			NotifyBar,
			Scroll,
			Map,
			InformationBar,
			Add
		},
		data() {
			return {
				old_latitude: 0,
				old_longitude: 0,
				latitude: 0,
				longitude: 0,
				token: '',
				opIndex: 0,
				size: {
					'list': {right: '32.72rpx',bottom: '32.72rpx'},
					'map': {right: '40%',bottom: '32.72rpx'}
				},
				displayIndex: true,
				/**
				 * 销毁Map组件的标记
				 * @date 2022-06-21
				 * @author 乐嘉伟 
				 */
				hackReset: true,
				titles: ['新鲜事','热点','关注','附近事'],
				notices: '这是 NoticeBar 通告栏，这是 NoticeBar 通告栏，这是 NoticeBar 通告栏',
				tieArr:{
					'new': {num: 1,page:0,list:[]},
					'hot': {num: 2,page:0,list:[]},
					'attention': {num: 3,page:0,list:[]},
					'near': {num: 4,page:0,list:[]}
				},
				listNum: 0,
				visited: [],
				currentType: 'new'
			}
		},
		/**
		 * 挂载组件时加载位置和数据
		 * @date 2022-06-21
		 * @author 乐嘉伟 
		 */
		mounted() {
			this.getLocation()
			this.getTieData('new')
			// this.getTieData('hot')
		},
		/**
		 * 添加延时
		 * 避免与onLoad的异步请求冲突导致tieArr数据异常
		 * @date 2022-06-21
		 * @param null
		 * @return null
		 * @author 乐嘉伟 
		 */
		onShow() {
			this.updateData()
		},
		computed: {
			addBtn() {
				if(this.displayIndex) {
					return 'map'
				} else {
					return 'list'
				}
			}
		},
		methods: {
			/**
			 * 保存位置
			 * @date 2022-06-21
			 * @param {object} Event
			 * @return {Object} 经度，纬度
			 * @author 乐嘉伟 
			 */
			setLocation(e) {
				if(e.detail.__args__[0]!=null) {
					this.old_longitude = e.detail.__args__[0].longitude
					this.old_latitude = e.detail.__args__[0].latitude
				}
				
			},
			/**
			 * 获取当前位置
			 * 因为map组件修改为退出即销毁，获取位置修改到map的父组件中
			 * @date 2022-06-21
			 * @param null
			 * @return {Object} 经度，纬度
			 * @author 乐嘉伟 
			 */
			getLocation() {
				uni.getLocation({
					type: 'gcj02',
					success: (res) => {
						this.longitude = res.longitude
						this.latitude = res.latitude
					}
				})
			},
			/**
			 * 进入发言详情的广播
			 * @date 2022-06-21
			 * @param {object} 广播详情
			 * @return {Array} 删除已访问过的发言列表
			 * @author 乐嘉伟 
			 */
			async childClick(e) {
				this.visited['id-' + e.detail.__args__[0]] = true;
				await this.filterAlreayRead();
				setTimeout(()=>{//避免尚未跳转地图就已销毁
					this.hackReset = false; //销毁组件
					this.latitude=this.old_latitude//恢复之前位置
					this.longitude=this.old_longitude
					this.$nextTick(() => {
						this.hackReset = true; //重建组件
					});
				},500)
				
			},
			
			tabClick(index) {
				switch(index) {
					case 0:
						this.currentType = 'new'
						break
					case 1:
						this.currentType = 'hot'
						break
					case 2:
						this.currentType = 'attention'
						break
					case 3:
						this.currentType = 'near'
				}
			},
			mapListClick(index) {
				if(index == 0) {
					this.displayIndex = true
				} else {
					this.displayIndex = false
				}
			},
			async getTieData(type) {
				const page = this.tieArr[type].page + 1
				const res = await this.$myRequest({
					url: '/invitation/selectInviteAll',
					data: {
						num: this.tieArr[type].num,
						page: page,
						pageSize: 5
					}
				})
				// console.log(res)
				if(res.data.data.list.length != 0) {
					this.tieArr[type].list.push(...res.data.data.list)
					this.tieArr[type].page += 1
					this.listNum = res.data.data.pages
				}
				// console.log(this.tieArr[this.currentType].list)
			},
			loadMore() {
				// console.log('上拉在家更多')
				this.getTieData(this.currentType)
			},
			/**
			 * 初始化tieArr，同时获取第一页数据
			 * 获取后过滤已访问数据
			 * @date 2022-06-21
			 * @param null
			 * @return {Array} 消息列表
			 * @author 乐嘉伟 
			 */
			async updateData() {
				this.tieArr[this.currentType].page = 0
				this.tieArr[this.currentType].list = []
				console.log('updateData')
				await this.getTieData(this.currentType)
				this.filterAlreayRead()
			
			},
			/**
			 * 过滤已阅读发言
			 * @date 2022-06-21
			 * @param null
			 * @return null  
			 * @author 乐嘉伟 
			 */
			async filterAlreayRead() {
				for (let i = 0; i < this.tieArr[this.currentType].list.length; i++) {
					if (this.visited['id-' + this.tieArr[this.currentType].list[i].inviId]) {
						console.log('delete' + i)
						this.tieArr[this.currentType].list.splice(i, 1);
					}
				}
			}
		}
	}
</script>

<style>
</style>
